<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%@ include file="../include/commonimport.jsp"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>Computer Info</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">

	var num = 4;
$(function() {
	$.getJSON('<%=basePath%>/stock', function(data) {
		// Create the chart
		window.chart = new Highcharts.StockChart({
			chart : {
				renderTo : 'container'
			},

			exporting: {  
	            enabled: false //是否能导出趋势图图片
	        }, 
			title : {
					text : 'CPU使用情况'//图表标题
				},
		    xAxis: {
		    	tickPixelInterval: 400,//x轴上的间隔
			//	title :{
			//		text:"title"
			//	},
				type: 'datetime', //定义x轴上日期的显示格式
				labels: {
				formatter: function() {
					var vDate=new Date(this.value);
					//alert(this.value);
					return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();
				},
				align: 'center'
			}
		    },
		    yAxis : {  
	                  
	              title: {  
	                  text: '使用率'  //y轴上的标题
	              }  
	         },  
			tooltip: {
	            xDateFormat: '%Y-%m-%d %H:%M:%S, %A'//鼠标移动到趋势线上时显示的日期格式
	        },
		    rangeSelector: {
				buttons: [{//定义一组buttons,下标从0开始
				type: 'day',
				count: 1,
				text: '1天'
			}, {
				type: 'week',
				count: 1,
				text: '1周'
			}, {
				type: 'month',
				count: 1,
				text: '1月'
			}, {
				type: 'month',
				count: num,
				text: num+'月'
			}, {
				type: 'month',
				count: 6,
				text: '6月'
			}, {
				type: 'year',
				count: 1,
				text: '1年'
			}, {
				type: 'all',
				text: '全部'
			}],
				selected: 0//表示以上定义button的index,从0开始
		    },
		    
		    series: [{
		        name: 'USD to EUR(美元对欧元)',//鼠标移到趋势线上时显示的属性名
		        data: testData,//属性值
				marker : {
						enabled : true,              //开启曲线圆点
						radius : 3                   //曲线上圆点的半径
					},
				shadow : true                        //曲线阴影
		    }]
		});
	});

});

		</script>
		
		
			
		
		
		
  </head>
  
  <body>
       <div id="container" style="height: 400px; min-width: 600px"></div>
	http://blog.csdn.net/wan368500/article/details/7722136
  </body>
</html>



